<template>
  <div class="page-cont">
    <van-nav-bar
      title="存梁"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-search
      v-model="search"
      placeholder="输入梁片名称查询"
    />
    <van-tabs v-model="beamStatus">
      <van-tab
        title="待存梁"
        :name="0"
      />
      <van-tab
        title="已存梁"
        :name="1"
      />
      <van-tab
        title="已出厂"
        :name="2"
      />
    </van-tabs>
    <scroll-list
      v-model="list"
      @onLoad="onLoad"
      ref="list"
    >
      <storage-item
        v-for="(item, i) in list"
        :key="i"
        :data="item"
        @storage="storage(i)"
        @factory="factory(i)"
      />
    </scroll-list>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import ScrollList from '@/components/ScrollList/index.vue'
import StorageItem from './components/StorageItem.vue'

export default {
  name: "StoragePage",
  components: {
    StorageItem,
    ScrollList
  },
  data() {
    return {
      search: '',
      searchTimer: null,
      beamStatus: 0,
      list: [],
    };
  },
  created() {
  },
  watch: {
    beamStatus() {
      this.$refs.list.refresh()
    },
    search() {
      // 添加防抖
      this.searchTimer && clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(() => {
        this.$refs.list.refresh()
      }, 500)
    }
  },
  beforeDestroy() {
    this.searchTimer && clearTimeout(this.searchTimer)
  },
  methods: {
    async onLoad(page, done) {
      // beamStatus
      let res = await this.api.GET_STORAGE_LIST({pageNo: page, pageSize: 10, beamStatus: this.beamStatus, beamNo: this.search})
      this.list.push(...res.list)

      // 触发加载完成 大于50模拟全部加载完成
      done(res.pageNo === res.totalPage)
    },
    storage(i) {
      let item = this.list[i]
      this.$router.push({path: '/storage/edit', query: {json: JSON.stringify(item)}})
    },
    factory(i) {
      let item = JSON.parse(JSON.stringify(this.list[i]))
      item.beamStatus = 2
      item.gmtOut = dayjs().format('YYYYMMDDHHmmss')

      // 取消计划
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认出厂?",
        })
        .then(async () => {
          this.$toast.loading({message: "加载中...", forbidClick: true});
          await this.api.UPDATE_STORAGE_DATA(item);
          this.$toast.clear();
          this.$refs.list.refresh()
        })
        .catch(() => {});
    },
  }
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
